<template>
  <div class="pickerHeaderContainer">
    <div class="title">{{ this.title }}</div>
  </div>
</template>
<script>
export default {
  props: {
    titlePro: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "",
    };
  },
  mounted() {
    this.title = this.titlePro;
  },
  watch: {
    titlePro(newVal) {
      this.title = newVal;
    },
  }
}
</script>
<style scope>
.pickerHeaderContainer {
  height: 56px;
  width: auto;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* background: rgba(255, 0, 0, 0.5); */
}

.pickerHeaderContainer .title {
  font-size: 20px;
  color: var(--current-dialog-title-color);
}
</style>
